<template>
  <div>
    <n-button text @click="show=true">
      <n-icon size="32">
        <icon icon="mdi:menu"></icon>
      </n-icon>
    </n-button>
  </div>
  <n-drawer v-model:show="show" placement="left">
    <div class="flex flex-col justify-between h-full p-5">
      <LoginButton v-if="isLogin" block size="large"></LoginButton>
      <div v-else class="flex justify-center"><HeaderAvatarMenu ></HeaderAvatarMenu></div>
      <div class="flex-1">
        <HeaderMenu mode="vertical"></HeaderMenu>
      </div>
      <div>
        <ThemeSwitch></ThemeSwitch>
      </div>
    </div>
  </n-drawer>
</template>

<script setup lang="ts">

import HeaderMenu from "@/components/pc/menu/HeaderMenu.vue";
import {ref} from "vue";
import LoginButton from "@/components/pc/button/LoginButton.vue";
import {Icon} from "@iconify/vue";
import ThemeSwitch from "@/components/pc/switch/ThemeSwitch.vue";
import HeaderAvatarMenu from "@/components/pc/menu/HeaderAvatarMenu.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "@/store";

const {isLogin} = storeToRefs(useUserStore())
const show = ref(false)


</script>

<style scoped>

</style>